<template>
  <div class="product-container">
    <div class="left-menu">
      <h2>供需管理</h2>
      <Menu
        style="width: 200px"
        :selected-keys="[reviewMenu]"
        mode="inline"
        @click="handleClickMenu"
      >
        <MenuItem v-for="{ dictLabel, dictValue } in menus" :key="dictValue">
          {{ dictLabel }}
        </MenuItem>
      </Menu>
    </div>

    <div class="table-container">
      <opLib v-if="reviewMenu == 1"></opLib>
      <crossClubOb v-if="reviewMenu == 2"></crossClubOb>
      <PromotionReview v-if="reviewMenu == 3"></PromotionReview>
      <orgManage v-if="reviewMenu == 4"></orgManage>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { Menu, MenuItem } from 'ant-design-vue';
  import PromotionReview from './PromotionReview/index.vue';
  import opLib from './opLib/index.vue';
  import crossClubOb from './crossClubOb/index.vue';
  import orgManage from './orgManage/index.vue';

  const menus = reactive([
    {
      dictLabel: '供需库（全）',
      dictValue: 1,
    },
    {
      dictLabel: '跨会供需库',
      dictValue: 2,
    },
    {
      dictLabel: '推广审核',
      dictValue: 3,
    },
    {
      dictLabel: '组织管理',
      dictValue: 4,
    },
  ]);

  const reviewMenu = ref(menus[0].dictValue);

  const handleClickMenu = ({ key }) => {
    reviewMenu.value = key;
  };
</script>

<style lang="less" scoped>
  .product-container {
    display: flex;
    padding-top: 10px;
    padding-left: 10px;

    .left-menu {
      background-color: white;

      h2 {
        padding: 10px 16px;
        padding-bottom: 0;
        font-weight: bold;
      }
    }
    .table-container {
      max-width: calc(100% - 200px);
    }
  }
</style>
